<!-- @format -->

<template>
  <el-row style="width: 100%">
    <el-col :xs="10" :sm="6" :span="4" v-if="theProps.label">
      {{ theProps.ifInnerShow }} -- {{ theProps.label }}
    </el-col>
    <el-col
      :xs="theProps.label ? 14 : 24"
      :sm="theProps.label ? 18 : 24"
      :span="theProps.label ? 20 : 24"
    >
      <!-- 组件们 -->

      <!-- 纯文本 -->
      <el-text v-if="theProps.components === THE_COMP_TYPE.TEXT">adfs</el-text>

      <!-- 输入框 -->
      <template v-if="theProps.components === THE_COMP_TYPE.INPUT">
        <el-input
          v-bind="theProps.componentProps"
          v-model="thePropsModelValue"
          @input="($event) => onUpdateValue($event, theProps.components)"
        ></el-input>
      </template>

      <!-- 选择框 -->
      <template v-if="theProps.components === THE_COMP_TYPE.SELECT">
        <el-select
          v-bind="theProps.componentProps"
          clearable
          v-model="thePropsModelValue"
          @change="($event) => onUpdateValue($event, theProps.components)"
        >
          <el-option
            v-for="item in theProps.componentProps.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
      <!-- 插槽 -->
      <template v-if="theProps.components === THE_COMP_TYPE.SLOT">
        <CompSlot
          :compInfo="theProps.slots"
          :slotName="theProps.slotName"
          :modelValue="thePropsModelValue"
        />
      </template>

      <!-- end 函数 -->
      <CompEnd v-if="!!theProps.end" :compInfo="theProps.end" />

      <div>
        <el-text class="mx-1" type="danger">Danger</el-text>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { THE_COMP_TYPE } from '../conf'
  import CompEnd from './comp-end'
  import CompSlot from './comp-slot'

  const theProps = defineProps({
    label: { type: String },
    modelValue: {},
    components: {
      type: String,
      default: THE_COMP_TYPE.INPUT,
      validator: (value: any) => {
        if (!Object.values(THE_COMP_TYPE).includes(value)) {
          // throw new Error('')
          console.error(
            value + '组件未定义,组件值参考:' + Object.values(THE_COMP_TYPE),
          )
        }
        return Object.values(THE_COMP_TYPE).includes(value)
      },
    },
    componentProps: {
      type: Object,
      default: () => ({}),
    },
    end: {
      type: Object,
    },

    slots: {
      type: Object,
    },
    slotName: {
      type: String,
    },
    ifShow: {
      type: Function,
      default: true,
    },
    ifInnerShow: {
      type: Boolean,
      default: true,
    },

    // isShow: {
    //   type: Boolean,
    //   default: true,
    // },
  })

  watch(
    () => theProps.ifInnerShow,
    (newValue) => {
      console.log(' newValue===>', newValue)
    },
    {
      deep: true,
    },
  )

  const thePropsModelValue = ref(theProps.modelValue)
  const theEmits = defineEmits(['update:modelValue'])
  const onUpdateValue = (value, theCompType: string) => {
    // 如果只需要值 就直接返回值
    if (theCompType === THE_COMP_TYPE.INPUT) {
      theEmits('update:modelValue', value)
    } else if (theCompType === THE_COMP_TYPE.SELECT) {
      theEmits('update:modelValue', value)
    } else {
      theEmits('update:modelValue', value)
    }
  }
</script>
